import Vue from 'vue'
import VueRouter from 'vue-router'
import List from '../views/List.vue'
import History from './history.js'
import Echarts from '../views/echarts.vue'
import Demo from '../views/demo.vue'

Vue.use(VueRouter)
Vue.use(History)

// 实例化之前，扩展Router
VueRouter.prototype.goBack = function () {
  this.isBack = true;
  this.back();
}

const routes = [
  {
    path: '/list/:id',
    name: 'List',
    component: List
  },
  {
    path: '/echarts',
    name: 'Echarts',
    component: Echarts
  },
  {
    path: '/item',
    name: 'Item',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Item.vue')
  },
  {
    path: '/demo',
    name: 'Demo',
    component: Demo
  }
]

const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})
// afterEach记录历史记录
router.afterEach((to, from) => {
  if (router.isBack) {
    // 后退
    History.pop();
    router.isBack = false;
    router.transitionName = 'route-back';
  } else {
    History.push(to.path);
    router.transitionName = 'route-forward';
  }
})

export default router
